<template>
    <p>Vuex页</p>
    <p>count: {{ count }}</p>
    <p>tenTimes: {{ tenTimes }}</p>
    <button @click="updateVuexCount">修改count</button>
    <button @click="asyncincrement">修改count-action</button>
    <p>moduleA: countA {{ store.state.a.countA }}</p>
    <p>moduleB: countB {{ store.state.a.countB }}</p>
    <P>moduleA: doubleCountA {{ store.geteers.doubleCountA }}</P>
    <P>moduleB: doubleCountb {{ store.geteers['b/doubleCountB'] }}</P>
    <button @click="moduleAincrementA">模块A-mutation-触发</button>
    <button @click="moduleAincrementB">模块B-mutation-触发</button>
    <button @click="moduleAasyncIncrementA">模块A-action-触发</button>
    <button @click="moduleAasyncIncrementB">模块B-action-触发</button>
    <button @click="moduleBemitGlobalMut">模块B出发全局-mut</button>
    <button @click="moduleBemitGlobalMut">模块B出发全局-act</button>

</template>


<script setup>
   import {computed} from 'vue'
   import {useStore} from 'vuex'

    /* 获得实例化对象  */
   const store = useStore()

   const count = computed(() => store .state .count)
   const tenTimes = computed(() => store.geteers.tenTimes)

//    触发mutation
const updateVuexCount = () => {
    store.commit("increment", {count:20})
}

// 使用 action
const asyncincrement = () => store.dispatch('asyncincrement', {count:30})

// mutations
const moduleAincrementA = () => {
    store.commit('incrementA')
}

const moduleAincrementB = () => {
    store.commit('incrementB')
}

// action
const moduleAasyncIncrementA = () => {
    store.dispatch('asyncIncrementA')
}

const moduleAasyncIncrementB = () => {
    store.dispatch('asyncIncrementB')
}

const moduleBemitGlobalMut = () => {
    store.dispatch('b/emitGlobalMut')
}

const moduleBemitGlobalAct = () => {
    store.dispatch('b/emitGlobalAct')
}


</script>